<template>
  <div class="data-wrap">
    <my-tabs :tab-list="tabList">
      <template v-slot="{ row }">
        <li
          class="item pointer"
          :class="{ active: routePath === row.path }"
          @click="handleClickMenu(row)"
        >
          {{ row.title }}
        </li>
      </template>
    </my-tabs>
    <el-form
      ref="infoForm"
      :model="infoForm"
      :rules="rulesInfo"
      label-width="80px"
      size="mini"
      class="form-wrap"
    >
      <el-form-item label="登录账号" v-if="!$util.isEmpty(accountInfo)">
        <el-row type="flex" align="middle">
          <template v-if="accountInfo.rest_times == 1">
            <template v-if="userNameShow">
              {{ accountInfo.user_name }}
              <el-link
                type="primary"
                :underline="false"
                icon="el-icon-edit"
                @click="userNameShow = false"
              ></el-link>
            </template>
            <template v-else>
              <el-col :span="14">
                <el-input v-model="infoForm.user_name" placeholder="请输入账号"></el-input>
              </el-col>
              <el-link type="primary" :underline="false" @click="userNameShow = true">取消</el-link>
            </template>
          </template>
          <el-col :span="14" v-else>{{ accountInfo.user_name }}</el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="昵称" prop="nick_name">
        <el-row>
          <el-col :span="14">
            <el-input
              v-model="infoForm.nick_name"
              :minlength="1"
              :maxlength="20"
              :showWordLimit="true"
              placeholder="请输入昵称"
            ></el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="手机号码">
        <el-row type="flex" align="middle">
          <div>{{ accountInfo.phone | formatMask }}</div>
          <el-button
            type="text"
            icon="el-icon-edit el-icon--right"
            @click="accountPhone"
          ></el-button>
        </el-row>
        <div class="mag">可用于登录、密码找回和重要信息接收</div>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="infoForm.gender">
          <el-radio label="1">男</el-radio>
          <el-radio label="2">女</el-radio>
          <el-radio label="0">保密</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="个人简介" prop="signature">
        <edu-textarea
          :value.sync="infoForm.signature"
          :args="{ rows: 3, placeholder: '个人简介', minlength: 1, maxlength: 50, word_limit: 1 }"
        ></edu-textarea>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('infoForm')" size="mini">保存</el-button>
      </el-form-item>
    </el-form>
    <amend-phone :visible.sync="phoneVisible" @phone="handlePhone"></amend-phone>
  </div>
</template>

<script>
import MyTabs from '../components/myTab.vue'
import EduTextarea from '@/components/EduTextarea'
import amendPhone from './phone'
export default {
  components: {
    MyTabs,
    EduTextarea,
    amendPhone
  },
  inject: ['reload'],
  data() {
    return {
      tabList: [
        {
          path: '/my/profile/my_profile',
          title: '基本信息'
        },
        {
          path: '/my/profile/my_photo',
          title: '头像设置'
        }
      ],
      infoForm: {
        user_name: this.$store.getters['user/accountInfo'].user_name,
        nick_name: this.$store.getters['user/accountInfo'].nick_name,
        gender: this.$store.getters['user/accountInfo'].gender.toString(),
        signature: this.$store.getters['user/accountInfo'].signature,
        phone: this.$store.getters['user/accountInfo'].phone,
        avatar: this.$route.query.avatarId
      },
      rulesInfo: {
        nick_name: [{ required: true, message: '请输入账号昵称', trigger: 'blur' }]
      },
      userNameShow: true,
      phoneVisible: false
    }
  },
  computed: {
    // 用户信息
    accountInfo() {
      return this.$store.getters['user/accountInfo']
    },
    routePath() {
      return this.$route.path
    }
  },
  methods: {
    onSubmit(formName) {
      let _this = this
      _this.$refs[formName].validate(valid => {
        if (valid) {
          this.$api.editAccountInfo(
            {
              ..._this.infoForm
            },
            res => {
              _this.$message.success(res.msg, res => {
                this.reload()
              })
              this.$store.dispatch('user/userInfo') // 更新用户信息
            },
            error => {
              _this.$message.error(error.msg)
            }
          )
        } else {
          return false
        }
      })
    },
    accountPhone() {
      this.phoneVisible = true
    },
    handlePhone(data) {
      this.infoForm.phone = data
    },
    handleClickMenu(data) {
      this.$router.push({
        path: data.path
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.data-wrap {
  ::v-deep .el-form {
    .el-form-item__label,
    .el-form-item__content,
    .el-radio__label {
      font-size: 12px;
    }
  }
  .form-wrap {
    width: 482px;
  }
  .mag {
    font-size: 12px;
    color: $text-color-auxiliary;
  }
  .el-link {
    display: flex;
    font-size: 12px;
    margin-left: 5px;
  }
}
</style>
